<script setup lang="ts">
import {reactive, ref} from "vue";

const activeName = ref('login')
const loginForm = reactive({
  account: '',
  password: ''
})
const registerForm = ref({
  account: '',
  password: '',
  confirmPassword: ''
})
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header-wrapped">
        <div class="header-content">
          <h3>management-pro</h3>
          <span>欢迎您的登录</span>
        </div>
      </el-header>
      <el-main>
        <div class="login-wrapped">
          <el-card class="el-card">
            <el-tabs v-model="activeName" class="demo-tabs" stretch>
              <el-tab-pane label="登录" name="login">
                <el-form :model="loginForm" label-width="auto" style="max-width: 400px">
                  <el-form-item label="账号">
                    <el-input v-model="loginForm.account" placeholder="请输入账号"/>
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input v-model="loginForm.password" placeholder="请输入密码"/>
                  </el-form-item>
                  <div class="forget-password">
                    <span class="forget-password-button">忘记密码</span>
                  </div>
                    <el-button style="margin-left: 40px; margin-top: 10px; width: 90%">
                      登录
                    </el-button>
                  <div class="to-register">
                    没有账号？<span class="to-register-button">立即注册</span>
                  </div>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="注册" name="register">
                <el-form :model="registerForm" label-width="auto" style="max-width: 400px">
                  <el-form-item label="账号">
                    <el-input v-model="registerForm.account" placeholder="账号长度为6-12位"/>
                  </el-form-item>
                  <el-form-item label="密码">
                    <el-input v-model="registerForm.password" placeholder="密码长度为6-12位且需包含字母数字"/>
                  </el-form-item>
                  <el-form-item label="确认密码">
                    <el-input v-model="registerForm.confirmPassword" placeholder="密码长度为6-12位且需包含字母数字"/>
                  </el-form-item>
                  <el-button style="margin-left: 70px; margin-top: 10px; width: 83%">
                    注册
                  </el-button>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
      </el-main>
      <el-footer class="footer-wrapped">
        <div class="footer-content">
          <div class="title">
            <span>Copyright © 2024-2034 management-pro All Rights Reserved.</span>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
.header-wrapped {
  .header-content {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.el-main {
  position: relative;
  height: 800px;
  overflow: hidden;

  .login-wrapped {
    width: 1200px;
    height: 800px;
    margin: 0 auto;
    background: #44adbc;

    .el-card {
      width: 500px;
      height: 350px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #56d1a9;

      .forget-password {
        display: flex;
        justify-content: flex-end;
        .forget-password-button {
          font-size: 12px;
          cursor: pointer;
          color: #409eff;
        }
      }

      .to-register {
        display: flex;
        justify-content: flex-end;
        margin-top: 15px;
        font-size: 12px;
        .to-register-button {
          cursor: pointer;
          color: #409eff;
        }
      }

      :deep(.el-tabs__item) {
        font-size: 16px;
        font-weight: bold;
      }

      :deep(.el-form) {
        margin: 40px auto;
      }
      :deep(.el-input__inner) {
        height: 30px;
        line-height: 30px;
      }
    }
  }
}


.footer-wrapped {
  width: 1200px;
  margin: 0 auto;

  .footer-content {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
}


</style>